<template>
  <div>
    <div style="margin-bottom: 40px">
      <manager-header></manager-header>
    </div>

    <div class="content" style="width: 1600px">
      <div class="content" style="width: 200px">
        <manager-navigation v-on:getIndex="getIndex"></manager-navigation>
<!--        <manage-container></manage-container>-->
      </div>

      <div>
       <article-manage v-if="isShow === 'articleManage'"></article-manage>
        <article-audit-manage v-if="isShow === 'articleAudit'"></article-audit-manage>
        <column-manage v-if="isShow === 'columnManage'"></column-manage>
        <message-manage v-if="isShow === 'messageManage'"></message-manage>
      </div>
    </div>
  </div>
</template>

<script>

  import managerNavigation from '../../components/systemManage/ManageNavigation'
  import managerHeader from '../../components/systemManage/ManageHeader'
  import manageContainer from '../../components/systemManage/ManageContainer'
  import articleManage from './articleManage/ArticleManage'
  import articleAuditManage from './articleAudit/ArticleAuditManage'
  import columnManage from './columnManage/ColumnManage'
  import messageManage from './messageManage/MessageManage'
  export default {
    name: "SystemManage",
    components: {
      managerNavigation: managerNavigation,
      managerHeader: managerHeader,
      manageContainer: manageContainer,
      articleManage:articleManage,
      articleAuditManage:articleAuditManage,
      columnManage:columnManage,
      messageManage:messageManage
    },
    data(){
      return{
        isShow:''
      }
    },
    methods:{
      getIndex(index){
        if (index==='1-1') {
          this.isShow = 'messageManage'
        }if (index==='1-2') {
          this.isShow = 'articleManage'
        }if (index==='1-3') {
          this.isShow = 'articleAudit'
        }if (index==='1-4') {
          this.isShow = 'columnManage'
        }if (index==='2-1') {
          this.isShow = 'permissionManage'
        }if (index==='2-2') {
          this.isShow = 'moduleManage'
        }if (index==='2-3') {
          this.isShow = 'roleDistribution'
        }if (index==='2-4') {
          this.isShow = 'operatorManage'
        }if (index==='2-5') {
          this.isShow = 'roleManage'
        }if (index==='2-6') {
          this.isShow = 'featureSetting'
        }if (index==='2-7') {
          this.isShow = 'homePageSetting'
        }if (index==='2-8') {
          this.isShow = 'codeTableManage'
        }
        console.log(this.isShow)
      }
    }

  }
</script>

<style scoped>
  .content {
    display: flex;
    justify-content: space-between;
  }
  .addArticle{
    float: right;
    margin-top: -40px;
  }
</style>
